<template>
   <div class="contact-container">
     <ul class="content no-drag" v-if="contactStore.currentContactId">
        <li class="header">
          <div class="header-left">
            <yd-img style="margin-right: 15px" width="60px" height="60px" :src="contactStore.contactInfo.avatar"></yd-img>
            <div class="user-info">
              <div style="display: flex; align-items: center;">
                <span style="color: black;margin-right: 5px;font-size: 16px">{{ contactStore.contactInfo.nickname }}</span>
                <el-icon v-if="contactStore.contactInfo.gender === 1"  style="font-weight: bolder;font-size: 16px; color: deepskyblue"><Female /></el-icon>
                <el-icon v-else style="font-weight: bolder;font-size: 16px; color: deeppink"><Male /></el-icon>
              </div>
              <div style="display: flex;flex-direction: column">
              <span class="content-font">微信号：{{contactStore.contactInfo.weChatCode}}</span>
                <span class="content-font">地区：{{contactStore.contactInfo.areaName}}</span>
              </div>
            </div>
          </div>
          <el-icon><MoreFilled /></el-icon>
        </li>

       <li>
         <div>
           <span class="title-font">备注</span>
           <span >{{contactStore.contactInfo.remark ? contactStore.contactInfo.remark : '添加备注名'}}</span>
         </div>
         <div>
           <span class="title-font">朋友权限</span>
           <span >{{contactStore.contactInfo.permission}}</span>
         </div>
         <div></div>
       </li>

       <li style="padding-bottom: 20px" v-if="contactStore.contactInfo.friendCircle && contactStore.contactInfo.friendCircle.length > 0">
         <div style="display: flex; align-items: center;">
           <span class="title-font">朋友圈</span>
           <div v-for="(item, index) in contactStore.contactInfo.friendCircle" :key="index">
             <div>
               <yd-img style="margin-right: 5px;" width="30px" height="30px" fit="cover" :src="item"></yd-img>
             </div>
           </div>
         </div>
       </li>

       <li style="padding-bottom: 20px">
         <div v-if="contactStore.contactInfo.commonGroupNumber">
           <span class="title-font" >共同群聊</span>
           <span >{{ contactStore.contactInfo.commonGroupNumber}}个</span>
         </div>
         <div>
           <span class="title-font">个性签名</span>
           <span >{{contactStore.contactInfo.personalSignature}}</span>
         </div>
         <div>
           <span class="title-font">来源</span>
           <span >{{contactStore.contactInfo.source}}</span>
         </div>
       </li>

       <li class="operator-container">
         <div>
           <span class="iconfont icon-chat" style="font-size: 20px;margin-bottom: 5px"></span>
           发消息
         </div>
         <div>
           <el-icon class="icon"><Phone /></el-icon>
           语音聊天
         </div>
         <div>
           <el-icon class="icon"><VideoCamera /></el-icon>
           视频聊天
         </div>
       </li>
     </ul>
     <empty v-else></empty>

   </div>
</template>


<script setup>
import  empty from '@/components/empty/index.vue'
import ydImg from '@/components/img/index.vue'
import {useContactStore} from '@/stores/contact'
import { Female, Male, MoreFilled, Phone, VideoCamera } from '@element-plus/icons-vue'

const contactStore = useContactStore()



</script>


<style scoped lang="less">
.contact-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  box-sizing: border-box;

  .content>li:first-child {
    padding-top: 0;
    padding-bottom: 20px;
  }

  .content {
    margin-top: 65px;
    padding: 0 45px;
    width: 450px;
    display: flex;
    //background-color: red;
    //justify-content: center;
    flex-direction: column;
    align-items: center;

    li {
      padding-top: 20px;
      border-bottom: 1px rgb(242, 242, 242) solid;
      width: 100%;
      color: black;
      display: grid;
      grid-template-columns: 1fr;
      grid-row-gap: 10px;
      padding-bottom: 10px;
    }


    .operator-container>div:last-child {
      margin-right: 0px;
    }
    .operator-container {
      display: flex;
      box-sizing: border-box;
      padding: 25px 40px;

      div {
        display: flex;
        flex-direction: column;
        color: rgb(87, 107, 149);
        align-items: center;
        width: 70px;
        height: 60px;
        justify-content: center;
        margin-right: 40px;

        .icon {
          font-size: 22px;
          margin-bottom: 5px;
        }
      }

      div:hover {
        background-color: rgb(242, 242, 242);
        cursor: pointer;
        border-radius: 5px;
      }
    }

    .header {
      display: flex !important;
      justify-content: space-between !important;
      height: auto !important;


      .header-left {
        display: flex;
        .user-info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
      }
    }

  }

  .content-font {
    color: rgb(158, 158, 158);
    font-size: 12px;
  }

  .title-font{
    color: rgb(158, 158, 158);
    font-size: 14px;
    width: 75px;
    display: inline-block;
  }



}

</style>
